<!--
 * @description: 
 * @Date: 2023-03-29 15:51:48
 * @example: 
 * @params: 
-->
<template>
    <div class="container">
        <div class="personal">
              <div class="avatar">
                <el-avatar
                  :src="AvatarUrl"
                  :size="90"
                />
              </div>
              <div class="name">
                <span class="Nickname">{{ nickName }}</span>
              </div>
              <div class="desc">
                 <span class="desc">{{ desction }}</span>
              </div>
              <div class="floow">
                 <el-button type="primary" :icon="User">Follow me </el-button>
              </div>
        </div>
        <div class="detail">
          <el-card class="card">
            <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="基本信息" name="first">User</el-tab-pane>
            <el-tab-pane label="账号绑定" name="second">Config</el-tab-pane>
            <!-- <el-tab-pane label="Role" name="third">Role</el-tab-pane>
            <el-tab-pane label="Task" name="fourth">Task</el-tab-pane> -->
          </el-tabs>
          </el-card>
        </div>
        <div class="deily">

        </div>
    </div>
  </template>
  <script setup lang="ts">
  import { User } from '@element-plus/icons-vue'
  import { ref, onMounted } from 'vue'
  import axios from 'axios';
  const AvatarUrl = ref()
  const nickName = ref("ZhangKai")
  const desction = ref("富在术数,不在劳生")
  const activeName = ref('first')

  const handlegetAvatarAndName = () => {
  const useremail = window.sessionStorage.getItem("useremail")
  axios.get(`https://v.api.aa1.cn/api/qqimg/?qq=${useremail}`).then(res=>{
       console.log("34234234",res.data)
       const srcValue = res.data.split('src=')[1].split('"')[0]; // using split method to extract the src value
       AvatarUrl.value = srcValue
       
  })
}

onMounted(()=>{
  handlegetAvatarAndName()
})



  </script>
  <style scoped lang="less">
  .container {
    border-radius: 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    // background-color: #fff;
    .personal{
      border-radius: 20px;
      padding: 20px;
      width: 25%;
      height:300px;
      background-color: #fff;
      .avatar{   
         text-align: center;
      }
      .name {
        text-align: center;
        margin-top: 5px;
      }
      .desc {
        text-align: center;
        margin-top: 5px;
      }
      .floow {
        margin-top: 10px;
        text-align: center;
        .el-button {
           border-radius: 20px;
        }
      }
    }
    .detail {
      border-radius: 20px;
      margin-left: 20px;
      width: 70%;
      height: 500px;
      background-color: aquamarine;
      .card {
          height: 100%;
          border-radius: 20px;
      }
    }
    .deily {
      border-radius: 20px;
      padding: 20px;
      width: 25%;
      height:200px;
      background-color: #fff;
      position: relative;
      top:-120px;
    }

  }
  </style>